<div class="table-column-selection form-inline">
  <form [formGroup]="form">
    <div ngbDropdown #columnDropdownMenu="ngbDropdown" [autoClose]="'outside'"
         placement="bottom-right" class="btn-group">
      <button class="btn btn-default dropdown" id="columnDropdownMenu" ngbDropdownToggle>列</button>

      <div (click)="clickMenu($event)" class="dropdown-menu" aria-labelledby="columnDropdownMenu" ngbDropdownMenu>
        <button class="dropdown-item">
          <input [(ngModel)]="keywords" formControlName="keywords" type="search" class="keywords form-control form-control-sm" placeholder="过滤" name="keywords">
          <i class="fa fa-search"></i>
        </button>

        <li class="dropdown-divider"></li>
        <ng-container *ngFor="let item of _columns; let i = index;">
          <button (click)="selectItem(item)" *ngIf="item.display"
            class="dropdown-item list-item">
            <input [(ngModel)]="item.display" formControlName="{{'menu-item-' + item.code}}" class="form-check-input" type="checkbox" value="{{item.code}}">
            <a>{{item.label}}</a>
          </button>
        </ng-container>

        <li class="dropdown-divider"></li>
        <ng-container *ngFor="let item of (_columns | myFilter:'label':keywords); let i = index;">
          <button (click)="selectItem(item)" *ngIf="!item.display"
                  class="dropdown-item list-item">
            <input [(ngModel)]="item.display" formControlName="{{'menu-item-' + item.code}}" class="form-check-input" type="checkbox" value="{{item.code}}">
            <a>{{item.label}}</a>
          </button>
        </ng-container>

      </div>
    </div>
  </form>
</div>
